<!-- 模板 -->
<template>
  <div class="root">
    <div class="MyImg">
      <img src="http://42.192.80.102/Printing man-img/back1.png" alt="" />
    </div>
    <div class="filter">
      <van-cell center title="是否过滤已购买产品">
        <template #right-icon>
          <van-switch
            v-model="checked"
            size="0.3rem"
            active-color="#FFBE4A"
            inactive-color="#fff"
            active-value="是"
            inactive-value="否"
          />
        </template>
      </van-cell>
    </div>
    <div class="desc">
      <van-sidebar v-model="activeKey" class="box1" @change="changeEvet">
        <van-sidebar-item
          :title="item.listName"
          v-for="item in items"
          :key="item.id"
        />
      </van-sidebar>
      <div class="box2">
        <van-card
          v-for="item in userList"
          :key="item.id"
          :price="item.price | getPrice()"
          :title="item.name"
          :thumb="item.imgUrl"
          :desc="item.custom"
          @click="CartId(item.id)"
        >
          <template>
            <price>{{ item.price }}</price>
          </template>
          <template #footer>
            <van-button
              size="small"
              round
              type="warning"
              @click.stop="getByIdCart(item.id, item.price)"
              >+</van-button
            >
          </template>
        </van-card>
      </div>
    </div>
    <MyFoots></MyFoots>
  </div>
</template>
<script>
import request from "../utils/request.js";
import MyFoots from "./MyFoots.vue";
import { Toast } from "vant";
Toast.setDefaultOptions({ duration: 2000 });
export default {
  name: "",
  data() {
    return {
      checked: true,
      active: 0,
      items: [],
      activeKey: 0,
      userId: 1,
      userList: [],
      event: 0,
    };
  },
  props: [],
  components: {
    MyFoots,
  },
  computed: {},
  filters: {
    getPrice(args) {
      args = String(args);
      let index = args.indexOf(".");
      console.log(index);
      if (index !== -1) {
        return args;
      }
      console.log(args + ".00");
      return args + ".00";
    },
  },
  methods: {
    //获得左侧列表
    async getList() {
      let options = {
        url: "users/getList",
        type: "get",
        data: {},
      };
      try {
        let { data: res } = await request(options);
        if (res.meta.status !== 200) {
          return console.log(res.meta.msg);
        }
        console.log(res.meta.msg);
        this.items = res.data;
        console.log(this.items[this.event]);
        this.userId = this.items[this.event].id;
        // console.log(this.items[0].id);
      } catch (error) {
        console.log(error);
      }
    },
    //右侧列表
    async getUserList() {
      let options = {
        url: "users/userList",
        type: "get",
        data: {
          id: this.userId,
        },
      };
      try {
        let { data: res } = await request(options);
        if (res.meta.status !== 200) {
          return console.log(res.meta.msg);
        }
        console.log(res.meta.msg);
        this.userList = res.data;
        // console.log(this.userList);
      } catch (error) {
        console.log(error);
      }
    },
    changeEvet(e) {
      this.event = e;
      // this.userId = e;
      this.userId = this.items[this.event].id;
      this.getUserList();
    },
    //点击商品存储商品id,跳转详情页
    CartId(id) {
      sessionStorage.setItem("details-goodsId", JSON.stringify(id));
      this.$router.push("/details");
    },
    //点击+添加 购物车
    async getByIdCart(id, price) {
      //存入商品id
      sessionStorage.setItem("cart-goodsId", JSON.stringify(id));
      console.log(id);
      let userId = this.getUserId();
      let options = {
        url: "users/getByIdCart",
        type: "get",
        data: {
          userId,
          goodsId: id,
          price,
          number: 1,
        },
      };
      try {
        let { data: res } = await request(options);
        if (res.meta.status !== 200) {
          return Toast.fail(res.meta.msg);
        }
        Toast.success(res.meta.msg);
        this.$router.push("/cart");
        console.log(res);
      } catch (error) {
        console.log(error);
      }
    },
    //获得用户id
    getUserId() {
      let str = sessionStorage.getItem("user-login");
      if (!str) {
        return Toast.fail("请先登录");
      }
      let userId = JSON.parse(str).data[0].id;
      console.log(userId);
      return userId;
    },
  },
  created() {},
  mounted() {
    this.getList();
    this.getUserList();
  },
};
</script>
<style lang="less" scoped>
.root {
  padding: 0.1rem 0.2rem;
  background-color: #f5f5f5;
  overflow: hidden;
  .MyImg {
    img {
      width: 100%;
      height: 2rem;
    }
  }
  .filter {
    margin-top: 0.15rem;

    .van-cell {
      padding: 0.3rem;
      border-radius: 0.1rem;
      font-size: 0.28rem;
      color: #333;
    }
  }
  .desc {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 0.2rem;
    font-size: 0.24rem;
    .box1 {
      width: 25%;
      background: transparent;
      height: calc(100vh - 4.7rem);
      overflow: auto;
      &::-webkit-scrollbar {
        display: none;
      }
      .van-sidebar-item {
        display: block;
        font-size: 0.28rem;
        padding: 0.24rem 0;
        border-radius: 0.1rem;
        text-align: center;
        background: transparent;
      }
      .van-sidebar-item--select {
        background: #fff;
      }
      .van-sidebar-item--select::before {
        background-color: #ffbe4a;
        width: 0.3rem;
        height: 0.3rem;
        border-radius: 0.2rem;
        position: absolute;
        left: -0.2rem;
      }
    }
    .box2 {
      width: 75%;
      padding: 0 0.32rem;
      height: calc(100vh - 4.7rem);
      overflow: auto;
      &::-webkit-scrollbar {
        display: none;
      }
      .van-card {
        background: transparent;
        border-bottom: 1px solid #e5e5e5;
        padding: 0.16rem 0;
        .van-card__thumb {
          width: 1.24rem;
          height: 1.24rem;
        }
        .van-card__content {
          div {
            .van-multi-ellipsis--l2 {
              max-height: 0.5rem;
              font-size: 0.28rem;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              line-height: 1.5;
            }
            .van-card__desc {
              font-size: 0.2rem;
              color: #666;
              line-height: 1.5;
              max-height: 0.5rem;
              overflow: visible;
            }
            .van-card__price {
              padding-top: 0.1rem;
              span {
                font-size: 0.26rem;
                color: #e55507;
              }
            }
          }
        }
      }

      .van-card__footer {
        .van-button {
          width: 0.35rem;
          height: 0.35rem;
          border-radius: 0.2rem;
          background-color: #ffbe4a;
          position: absolute;
          bottom: 0.1rem;
          right: 0.2rem;
          font-size: 0.24rem;
        }
        .van-button::before {
          font-size: 0.24rem;
        }
      }
    }
  }
}
</style>
